<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>热辐射光谱仪</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/bbfont.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="qv.css">
  <style>
    .chart {
      position: absolute;
      height: 100%;
      width: 100%;
      border: 1px solid #ccc
    }
  </style>
</head>
<body id="viewer" class="M1">
<div id="CCC" style="padding: 4px 6px;align-items: center">
  <button class="btn btn-primary btn-sm disactive-btn" onclick="main.realtime()" id="realtime">实时</button>
  <button class="btn btn-primary btn-sm mx-1" id="history" onclick="main.history()">历史</button>
  日期:
  <input id="day" type="date" value="">
  任务:
  <select id="task" class="sele-comp">
  </select>
  <select style="display: none" id="modes" class="sele-comp"></select>
  最大帧:
  <label id="frm_max"></label>
  <input id="frm_input" oninput="this.nextElementSibling.value=this.value" style="min-width: 60px" type="number">
  <input oninput="this.previousElementSibling.value=this.value" id="frm_range" type="range" min="0" max="0" value="0"
         step="1" style="max-width: 400px">
  <div class="flex-grow-1"></div>
  <button class="btn btn-primary btn-sm"  onclick="main.exportCSV(this)"><i class="fa fa-file-text"></i>下载帧信息</button>
  <button id="frm_img_table" class="btn btn-primary btn-sm" style="display: none">LI</button>
</div>
<div class="d-flex d-flex flex-row" style="height: calc(100vh - 37px)">
  <div class="flex-grow-1 d-flex flex-column">
    <div class="flex-grow-1 position-relative">
      <div class="chart"></div>
    </div>
    <div class="flex-grow-1 position-relative">
      <div class="chart"></div>
    </div>
  </div>
  <div class="d-flex flex-column" style="width: 350px">
    <div class="card-header">
      数据
    </div>
    <div class="flex-grow-1  position-relative">
      <div class="position-absolute h-100 w-100" style="overflow-y: auto">
        <table id="params" class="table table-sm table-hover"></table>
      </div>
    </div>
  </div>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js?12"></script>
<script src="/static/js/echarts.4.9.js"></script>
<script src="qv.js"></script>
<script src="gunc/index.js"></script>
<script>
  const ParamConst = {
    pointing_mechanism_status: {
      0:'零位到位',
      1:'正限位到位',
      2:'其他角度到位',
      3:'切换过程',
      4:'负限位到位'
    },
    calibration_mechanism_status: {
      0:'定标黑体切出',
      1:'定标黑体切入',
      2:'切换过程'
    },
    interferometer_scan_direction: {
      1:'正',
      2:'反'
    },
    circuit_gain: {
      1:'高16位,1倍',
      2:'中间16位,2倍',
      4:'低16位,4倍'
    }
  }
  class Chart {
    constructor(dom, name) {
      this.dom = dom
      this.c = echarts.init(dom);
      this.name = name
      this.c.setOption({
        title: {text: name},
        grid: {},
        xAxis: {name: "V", type: 'value'},
        yAxis: {name: 'V', type: 'value'},
        series: {type: 'line', symbol: 'none'},
        animation: false,
      })
    }

    draw(d) {
      this.c.clear()
      this.c.setOption({
        title: {text: this.name},
        grid: {},
        xAxis: {name: "V", type: 'value'},
        yAxis: {name: 'V', type: 'value'},
        animation: false,
        series: {type: 'line', symbol: 'none',data: Array.from(d).map((a, b) => [b, a])}
      })
    }
  }

  let params = [
    {n: "帧同步码", k: "frame_sync_code",v: new RawFmt('4X').X, r: "4X"},
    {n: "帧计数", k: "frame_count", r: "4X",},
    {n: "时间码", k: "time_code", v: BJT},
    {n: "本地时间计数1", k: "local_time_count1", r: "6X",},
    // {n: "指向机构状态", k: "pointing_mechanism_status", r: "2X",},
    {n: "指向机构状态", k: "pointing_mechanism_status",v: v => ParamConst.pointing_mechanism_status[v], r: "2X"},
    {n: "定标机构状态", k: "calibration_mechanism_status",v: v => ParamConst.calibration_mechanism_status[v],  r: "2X"},
    {n: "干涉仪零偏状态", k: "interferometer_zero_bias_status", r: "4X",},
    {n: "干涉仪扫描方向", k: "interferometer_scan_direction",v: v => ParamConst.interferometer_scan_direction[v], r: "2X"},
    {n: "干涉仪速度1", k: "interferometer_speed1", r: "4X",},
    {n: "干涉仪速度2", k: "interferometer_speed2", r: "4X",},
    {n: "干涉仪速度3", k: "interferometer_speed3", r: "4X",},
    {n: "干涉仪速度4", k: "interferometer_speed4", r: "4X",},
    {n: "干涉仪速度5", k: "interferometer_speed5", r: "4X",},
    {n: "指向机构角度", k: "pointing_mechanism_angle", r: "4X",},
    {n: "电路增益", k: "circuit_gain",v: v => ParamConst.circuit_gain[v], r: "2X"},
  ];

  class XView extends Realtime {
    constructor() {
      super('ATES', $STATION, params)
      let c = $$$('.chart')
      this.A = new Chart(c[0], 'A')
      this.B = new Chart(c[1], 'B')
      this.$frmr.onchange = this.select_frame.bind(this)
       this.$day.onchange = this.onDay.bind(this)
      window.onresize = ()=>{
        this.A.c.resize()
        this.B.c.resize()
      }
    }
    reset() {
      super.reset();
      this.A.c.clear()
      this.B.c.clear()
    }

    select_frame(ev) {
      let curid = this.$frmr.value;
      this.params(this.frames[curid])
    }

    // async load_frames() {
    //   await super.load_frames();
    //   this.frames = this.frames_ori;
    //   let curid = this.frame_index = this.$frmr.value
    //   this.params(this.frames[curid])
    // }

    params(d) {
      super.params(d)
      this.showframedraw(d)
    }

    newframe(d) {
      super.newframe(d)
      let cur_frm_index = this.frames_ori.length -1
      this.frame_max = cur_frm_index
      this.frame_index = cur_frm_index
      this.params(d)
    }

    async showframedraw(v) {
      let [offset, size] = v.frm;
      let bf = await $api(`omsp.bindata?t=${this.cur_task}&offset=${offset}&size=${size}`, null, v => v.arrayBuffer())
      let d = new Int16Array(bf)
      this.A.draw(d.slice(0, 1760))
      this.B.draw(d.slice(1760,))
    }
  }


  var main = new XView()
  main.realtime()

</script>
</body>
</html>